<!-- 校园印象swiper -->
<template>
	<div class="swiper-container swiper-schoolImage">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item) in list" :key="item.colId" @click="onClickSlide()">
				<img :src="item.cFileUrl" width="100%" height="100%"/>
			</div>
		</div>
		<div class="swiper-prev" v-if="list.length>1"></div>
		<div class="swiper-next" v-if="list.length>1"></div>
	</div>
</template>

<script>
import '@/assets/css/swiper.min.css'
import Swiper from '@/assets/js/swiper.min.js'
export default {
	props: {
		tabData: {
			type: Object,
			default: () => {
				return {
					bizAttachList: [],
				}
			},
		},
	},
	watch: {
		tabData(newVal) {
			this.list = newVal.bizAttachList
			this.initSwiper()
		},
	},
	data() {
		return {
			siwper: null,
			list: [],
			activeIndex: 0
		}
	},
	methods: {
		initSwiper() {
			this.$nextTick(() => {
				if (this.swiper) {
					this.swiper.destroy(true, true)
					//this.swiper.update()
					//return
					this.swiper = undefined
				}
				this.swiper = new Swiper('.swiper-schoolImage', {
					// loop: true,
					allowTouchMove: true,
					grabCursor: true,
					navigation: {
						nextEl: '.swiper-next',
						prevEl: '.swiper-prev',
					}
				})
			})
		},
		onClickSlide() {
			this.$emit('onClick', this.tabData)
		},
	},
}
</script>

<style lang="scss" scoped>
.swiper-schoolImage {
	position: relative;
	z-index: 0;
	width: 100%;
	overflow: hidden;
}

// .swiper-slide {
// 	width: 500px;
// 	height: 600px;
// }

.swiper-slide img {
	display: block;
}


.swiper-prev {
	position: absolute;
	z-index: 999;
	top: 40%;
	left: 5px;
	width: 45px;
	height: 45px;
	background: url(../../../assets/images/home/swiper_left.png) no-repeat;
	background-size: 100%;
}

.swiper-next {
	position: absolute;
	z-index: 999;
	right: 5px;
	top: 40%;
	width: 45px;
	height: 45px;
	background: url(../../../assets/images/home/swiper_right.png) no-repeat;
	background-size: 100%;
}
</style>
